<template>
  <div>
    <public-head title="在线缴费"></public-head>
    <yd-cell-group title="缴费信息" style="margin-top:10px">
      <yd-cell-item arrow type="label">
        <span slot="left">缴费类型：</span>
        <span slot="right" @click="feeTypeShow =true">{{feeTypeName}}</span>
      </yd-cell-item>
      <yd-cell-item arrow type="label" v-if="form.feeType!=3 && form.feeType!=4">
        <span slot="left">房间：</span>
        <select slot="right" v-model="form.homeId" @change="handleHomeChange">
          <option
            v-for="item in houseList"
            :value="item.home_id"
            :key="item.home_id"
          >{{ item.project }}({{ item.home_code }})</option>
        </select>
      </yd-cell-item>
      <yd-cell-item arrow type="label" v-if="form.feeType==3 || form.feeType==4">
        <span slot="left">车位：</span>
        <select slot="right" v-model="form.stallId" @change="handleStallChange">
          <option
            v-for="item in stallList"
            :value="item.stall_id"
            :key="item.stall_id"
          >{{ item.project }}({{ item.car_park_no }})</option>
        </select>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">上次计费截止日期：</span>
        <span slot="right">{{form.chargeStart|dateTimeFilter}}</span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">缴费月份：</span>
        <yd-spinner
          slot="right"
          max="12"
          unit="1"
          v-model="form.use"
          :callback="handleEndDateChange"
        ></yd-spinner>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">备注：</span>
        <yd-textarea slot="right" v-model="form.remark" placeholder="请输入缴费备注" maxlength="200"></yd-textarea>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group title="金额明细">
      <yd-cell-item type="label">
        <span slot="left">
          <div
            v-for="item in form.payItems"
            :key="item.type"
            :index="item.type"
          >{{item.feeTypeName}} {{item.money|moneyFormat}}</div>
        </span>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button size="large" type="primary" @click.native="buy">缴费</yd-button>
    <yd-actionsheet :items="feeTypeList" v-model="feeTypeShow"></yd-actionsheet>
    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import moment from "moment";
import wx from "weixin-js-sdk";
export default {
  components: {},
  data() {
    return {
      feeTypeShow: false,
      form: {
        token: undefined,
        feeType: undefined,
        homeId: undefined,
        stallId: undefined,
        chargeStart: undefined,
        chargeEndStr: moment().format("YYYY-MM"),
        chargeEnd: undefined,
        remark: undefined,
        payItems: [],
        use: undefined,
        chargeIds: [],
        payGarbage: undefined
      },
      feeTypeName: "选择缴费类型",
      houseList: [],
      stallList: [],
      feeTypeList: [
        {
          label: "物管报修费",
          callback: () => {
            this.form.feeType = 1;
            this.feeTypeName = "物管报修费";
          }
        },
        {
          label: "物业费",
          callback: () => {
            this.form.feeType = 2;
            this.feeTypeName = "物业费";
          }
        },
        {
          label: "车位管理费",
          callback: () => {
            this.form.feeType = 3;
            this.feeTypeName = "车位管理费";
          }
        },
        {
          label: "车位租金",
          callback: () => {
            this.form.feeType = 4;
            this.feeTypeName = "车位租金";
          }
        },
        {
          label: "装修管理费",
          callback: () => {
            this.form.feeType = 6;
            this.feeTypeName = "装修管理费";
          }
        },
        {
          label: "建渣清运费",
          callback: () => {
            this.form.feeType = 7;
            this.feeTypeName = "建渣清运费";
          }
        },
        {
          label: "水费",
          callback: () => {
            this.form.feeType = 8;
            this.feeTypeName = "水费";
          }
        },
        {
          label: "电费",
          callback: () => {
            this.form.feeType = 9;
            this.feeTypeName = "电费";
          }
        },
        {
          label: "气费",
          callback: () => {
            this.form.feeType = 10;
            this.feeTypeName = "气费";
          }
        },
        {
          label: "其他杂费",
          callback: () => {
            this.form.feeType = 11;
            this.feeTypeName = "其他杂费";
          }
        }
      ]
    };
  },
  filters: {
    dateTimeFilter(date) {
      if (date != null) {
        console.log(date);
        return moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        return "";
      }
    },
    moneyFormat(num) {
      num = Math.round(num * 10) / 10;
      return (
        "￥" +
        (+num || 0)
          .toString()
          .replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","))
      );
    },
    filterPayType(type) {
      if (type == 1) {
        return "微信";
      }
      if (type == 2) {
        return "现金";
      }
      if (type == 3) {
        return "刷卡";
      }
    }
  },
  created() {
    this.getHouseList();
    this.getStallList();
  },
  methods: {
    getHouseList() {
      // 根据电话号码返回用户信息
      this.axios
        .post(root + "/api/member/houseList", {
          token: this.token
        })
        .then(res => {
          if (res.data.status) {
            console.log(res.data.data);
            this.houseList = res.data.data;
          }
        });
    },
    getStallList() {
      // 根据电话号码返回用户信息
      this.axios
        .post(root + "/api/member/carParkList", {
          token: this.token
        })
        .then(res => {
          if (res.data.status) {
            console.log(res.data.data);
            this.stallList = res.data.data;
          }
        });
    },
    handleHomeChange() {
      console.log(this.form.feeType);
      if (this.form.feeType == undefined) {
        this.$dialog.toast({
          mes: "请先选择缴费类型！",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      this.axios
        .post(root + "/api/charge/getPayInfo", {
          sourceType: this.form.feeType,
          homeId: this.form.homeId,
          stallId: null
        })
        .then(res => {
          console.log(res.data);
          if (res.data.status == 1) {
            this.form = res.data.data;
            this.form.chargeEndStr = moment(this.form.chargeEnd).format(
              "YYYY-MM-DD HH:mm"
            );
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1000,
              icon: "error"
            });
          }
        });
    },
    handleStallChange() {
      console.log(this.form.feeType);
      console.log(this.form.stallId);
      if (this.form.feeType == undefined) {
        this.$dialog.toast({
          mes: "请先选择缴费类型！",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      this.axios
        .post(root + "/api/charge/getPayInfo", {
          sourceType: this.form.feeType,
          homeId: null,
          stallId: this.form.stallId
        })
        .then(res => {
          console.log(res.data);
          if (res.data.status == 1) {
            this.form = res.data.data;
            this.form.chargeEndStr = moment(this.form.chargeEnd).format(
              "YYYY-MM-DD HH:mm"
            );
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1000,
              icon: "error"
            });
          }
        });
    },
    handleEndDateChange() {
      if (this.form.payItems) {
        this.form.payItems.forEach(row => {
          row.money = row.price * this.form.use;
        });
      }
    },
    buy() {
      if (this.form.feeType == 2) {
        if (this.form.use == undefined) {
          this.$dialog.toast({
            mes: "请选择正确的缴费月份！",
            timeout: 1000,
            icon: "error"
          });
          return;
        }
      }

      if (this.form.payItems == undefined || this.form.payItems.length <= 0) {
        this.$dialog.toast({
          mes: "无可缴费项目！",
          timeout: 1000,
          icon: "error"
        });
        return;
      }

      // 调用微信支付接口
      // 判断是否绑定没有绑定跳转到绑定 绑定了调用支付接口
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/isBind", { token: this.token })
        .then(res => {
          this.isLoading(false);
          res.data.status == "1"
            ? this.toPay()
            : this.$dialog.toast({
                mes: "请先进行账号绑定",
                timeout: 1000,
                icon: "error",
                callback: () => {
                  this.$router.replace("/bindaccount");
                }
              });
        });
    },
    toPay() {
      this.isLoading(true);
      this.form.token = this.token;
      this.axios.post(root + "/api/weixin/toPay", this.form).then(response => {
        this.isLoading(false);
        this.wxPay(response.data.data.param);
      });
    },
    wxPay(param) {
      let _this = this;
      WeixinJSBridge.invoke("getBrandWCPayRequest", param, function(res) {
        WeixinJSBridge.log(res.err_msg);
        // alert(res.err_msg);
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 跳转到支付成功页面
          _this.$dialog.toast({
            mes: "支付成功！",
            timeout: 1000,
            icon: "success",
            callback: () => {
              _this.$router.replace("/feerecord");
            }
          });
        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
          // 订单在但是未支付
          _this.$dialog.toast({
            mes: "取消支付",
            timeout: 1000,
            icon: "error"
          });
        } else {
          // 支付失败
          _this.$dialog.toast({
            mes: "支付失败",
            timeout: 1000,
            icon: "error"
          });
        }
      });
    },
    ...mapActions(["isLoading"])
  },
  computed: {
    ...mapState(["is_loading", "token", "toast", "toastText"])
  }
};
</script>

<style lang="less" scoped>
</style>
